<template>
  <base-breadcrumb>
    <a-spin :spinning="spinning">
      <a-card :bordered="false">
        <title-name title="员工基础信息"></title-name>
          <a-form-model class="flex-model-form"
            ref="addForm"
            :model="data"
          >
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="员工名称">
                  <BaseInput v-model="data.employeeName" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="性别">
                  <BaseInput v-model="data.gender" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="员工编号">
                  <BaseInput v-model="data.employeeNo" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="状态">
                  <BaseInput v-model="data.status" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="电话号码">
                  <BaseInput v-model="data.phone" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="职务">
                  <BaseInput v-model="data.post" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="职称">
                  <BaseInput v-model="data.title" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="单位">
                  <BaseInput v-model="data.unit" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="第一学历">
                  <BaseInput v-model="data.firstEducation" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="第二学历">
                  <BaseInput v-model="data.secondEducation" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="专业">
                  <BaseInput v-model="data.specialitie" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="年龄">
                  <BaseInput v-model="data.age" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="生日">
                  <BaseInput v-model="data.birthday" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="身份证号码">
                  <BaseInput v-model="data.card" disabled></BaseInput>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        <!-- <a-descriptions>
          <a-descriptions-item label="员工名称"><ellipsis tooltip :length="70">{{ data.employeeName }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="性别"><ellipsis tooltip :length="70">{{ data.gender }}</ellipsis></a-descriptions-item
          ><br />
          <a-descriptions-item label="员工编号"><ellipsis tooltip :length="70">{{ data.employeeNo }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="职务"><ellipsis tooltip :length="70">{{ data.post }}</ellipsis></a-descriptions-item
          ><br />
          <a-descriptions-item label="电话号码"><ellipsis tooltip :length="70">{{ data.phone }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="职称"><ellipsis tooltip :length="70">{{ data.title }}</ellipsis></a-descriptions-item
          ><br />
          <a-descriptions-item label="第一学历"><ellipsis tooltip :length="70">{{ data.firstEducation }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="专业"><ellipsis tooltip :length="70">{{ data.specialitie }}</ellipsis></a-descriptions-item
          ><br />
          <a-descriptions-item label="第二学历"><ellipsis tooltip :length="70">{{ data.secondEducation }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="生日"><ellipsis tooltip :length="70">{{ data.birthday }}</ellipsis></a-descriptions-item
          ><br />
          <a-descriptions-item label="状态"><ellipsis tooltip :length="70">{{ data.status }}</ellipsis></a-descriptions-item>
          <a-descriptions-item label="身份证"><ellipsis tooltip :length="70">{{ data.card }}</ellipsis></a-descriptions-item>
        </a-descriptions> -->
      </a-card>
      <a-card :bordered="false" style="margin-bottom: 50px">
        <title-name title="科技成果获取历史"></title-name>
        <b-table
          ref="table"
          border
          :columns="columns"
          :request="loadData"
        >
            <span
              slot="index"
              slot-scope="text, record, index"
            >{{ index + 1 }}</span>
        </b-table>
        <!-- <div v-for="(items, index) in data.scienceAchievements" :key="index">
          <p>
            <b class="mb12">{{ items.name }}</b>
          </p>
          <a-collapse
            v-if="items.data && items.data.length > 0"
            :bordered="false"
            v-model="activeKey"
            expand-icon-position="right"
          >
            <a-collapse-panel
              :style="customStyle"
              :showArrow="true"
              v-for="(item, i) in items.data"
              :key="items.name + i"
            >
              <template slot="header">
                <a-row>
                  <a-col :span="2">
                    <div>成果名称：</div>
                  </a-col>
                  <a-col :span="22">{{ item.completeAchievementsName || '暂无' }}</a-col>
                </a-row>
              </template>
              <a-row class="expertEdit_box">
                <a-col :span="2">
                  <div class="expertEdit_name">成果获得时间：</div>
                </a-col>
                <a-col :span="22">
                  <div class="expertEdit_desc">{{ item.completeDate || '暂无' }}</div>
                </a-col>
              </a-row>
              <a-row class="expertEdit_box">
                <a-col :span="2">
                  <div class="expertEdit_name">成果等级：</div>
                </a-col>
                <a-col :span="22">
                  <div class="expertEdit_desc">{{ item.levelName || '暂无' }}</div>
                </a-col>
              </a-row>
              <a-row class="expertEdit_box">
                <a-col :span="2">
                  <div class="expertEdit_name">成果描述：</div>
                </a-col>
                <a-col :span="22">
                  <div class="expertEdit_desc">{{ item.description || '暂无' }}</div>
                </a-col>
              </a-row>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <empty
          v-if="!data.scienceAchievements || data.scienceAchievements.length == 0"
          description="暂无科技成果"
        ></empty> -->
      </a-card>
    </a-spin>
    <div
      class="page-btn-right-top"
    >
      <a-button type="primary" @click="goBack">返回</a-button>
    </div>
  </base-breadcrumb>
</template>
<script>
import { Ellipsis } from '@/components' // 表格
import { getEmployeeDetail, getEmployeeResult } from '@/api/science'
import { Empty, Collapse } from 'ant-design-vue' // 无数据提示

const columns = [
  {
    title: '序号',
    width: '80px',
    scopedSlots: {customRender: 'index'},
  },
  {
    title: '成果分类',
    ellipsis: true,
    width: '120px',
    dataIndex: 'typeName',
  },
  {
    title: '成果名称',
    // width: '200px',
    dataIndex: 'completeAchievementsName',
  },
  {
    title: '成果获得时间',
    dataIndex: 'completeDate',
    width: '120px',
  },
  {
    title: '成果等级',
    width: '120px',
    dataIndex: 'levelName',
  },
  {
    title: '成果描述',
    // width: '100px',
    dataIndex: 'description',
  },
]
export default {
  name:'a'+ Date.now(),
  components: {
    Empty,
    Ellipsis,
    ACollapse: Collapse,
    ACollapsePanel: Collapse['Panel'],
  },
  data() {
    return {
      columns,
      spinning: false,
      data: {},
      customStyle: 'background: #fff;border-radius: 4px;margin:0;border: 0;overflow: hidden',
      activeKey: [],
      id: '',
      form: {
        column: 2,
      },
      employeeName: '',
      column: 2,
      loadData: (parameter) => {
        let that = this
        const requestParameters = Object.assign({id: this.id}, parameter)
        return getEmployeeResult(requestParameters).then((res) => {
          return res
        })
      },
    }
  },
  created() {
    this.id = this.$route.query.id
    // console.log(this.id)
    this.getData()
  },
  methods: {
    getData() {
      this.spinning = true
      getEmployeeDetail({ id: this.id })
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.data = res.data
            let scienceAchievements = res.data.scienceAchievements
            if (scienceAchievements && scienceAchievements.length > 0) {
              scienceAchievements.forEach((item) => {
                this.activeKey = this.activeKey.concat(item.data.map((i, index) => item.name + index))
              })
            }
          }
        })
        .catch((res) => {
          this.spinning = false
        })
    },
    goBack() {
      this.$multiTab.close()
    },
  },
}
</script>
<style lang="less" scoped>
.flex-model-form .ant-form-item{
  display: flex;
}
.container {
  overflow: scroll;
}
.demo-loadmore-list {
  min-height: 350px;
}
.expertEdit_box {
  padding: 12px 0;
  .expertEdit_name {
    color: #989898;
  }
  .expertEdit_desc {
    color: #666666;
  }
}

/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding-left: 16px;
  padding-right: 16px;
  background: #f2f2f2;
}
/deep/ .ant-form-item {
  margin-bottom: 20px;
  .ant-form-item-label {
    padding-top: 9px;
  }
}
</style>
